<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input class="search-input" placeholder="搜索电站名称或地址" v-model="searchKeyword" />
      <text class="search-btn" @click="searchStations">搜索</text>
    </view>
    
    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: activeFilter === 'distance' }" @click="setFilter('distance')">
        距离
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'price' }" @click="setFilter('price')">
        价格
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'score' }" @click="setFilter('score')">
        评分
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'available' }" @click="setFilter('available')">
        空闲
      </view>
    </view>
    
    <!-- 电站列表 -->
    <scroll-view class="station-list" scroll-y>
      <view class="station-item" v-for="station in stationList" :key="station.id" @click="goToStationDetail(station.id)">
        <view class="station-image">
          <image class="station-img" src="/static/station/default.png"></image>
        </view>
        <view class="station-info">
          <view class="station-name">{{ station.name }}</view>
          <view class="station-meta">
            <text class="station-distance">{{ station.distance }}</text>
            <text class="station-score">{{ station.score }}分</text>
          </view>
          <view class="station-address">{{ station.address }}</view>
          <view class="station-price-guns">
            <text class="station-price">{{ station.price }}</text>
            <text class="station-guns">空闲{{ station.availableGunCount }}/{{ station.gunCount }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      searchKeyword: '',
      activeFilter: 'distance',
      stationList: []
    }
  },
  onLoad() {
    this.getStationList()
  },
  methods: {
    // 获取电站列表
    async getStationList() {
      try {
        const res = await api.station.getNearbyStations()
        if (res.code === 200) {
          this.stationList = res.data
        }
      } catch (error) {
        console.error('获取电站列表失败:', error)
      }
    },
    
    // 搜索电站
    searchStations() {
      uni.showToast({
        title: '搜索功能待实现',
        icon: 'none'
      })
    },
    
    // 设置筛选条件
    setFilter(filter) {
      this.activeFilter = filter
      uni.showToast({
        title: `按${filter}排序`,
        icon: 'none'
      })
    },
    
    // 跳转到电站详情
    goToStationDetail(id) {
      uni.navigateTo({
        url: `/pages/station/detail?id=${id}`
      })
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  margin: 20rpx;
}

.search-input {
  flex: 1;
  padding: 10rpx;
  font-size: 28rpx;
}

.search-btn {
  color: #007aff;
  font-size: 28rpx;
}

.filter-bar {
  display: flex;
  border-bottom: 1rpx solid #eee;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
}

.filter-item.active {
  color: #007aff;
  border-bottom: 4rpx solid #007aff;
}

.station-list {
  flex: 1;
}

.station-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.station-image {
  margin-right: 20rpx;
}

.station-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

.station-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.station-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.station-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.station-distance {
  font-size: 24rpx;
  color: #007aff;
}

.station-score {
  font-size: 24rpx;
  color: #ff9900;
}

.station-address {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.station-price-guns {
  display: flex;
  justify-content: space-between;
}

.station-price {
  font-size: 28rpx;
  color: #ff6600;
}

.station-guns {
  font-size: 24rpx;
  color: #333;
}
</style>